<template>
	<view class="mine">
		<view class="box1" v-if="showBox==1">
			<view v-if="this.user.name" class="user">
				<image class="img" :src="currentImg" @click="exit"></image>
				<text class="txt">{{user.name}}</text>
			</view>
			<view v-else class="btn" @click="showBox=2">
				登录
			</view>
		</view>
		<view class="box2" v-else-if="showBox==2">
			<view class="item">
				<text>账号：</text>
				<u--input placeholder="请输入账号" v-model="username" border="surround"></u--input>
			</view>
			<view class="item">
				<text>密码：</text>
				<u--input placeholder="请输入密码" type="password" v-model="password" border="surround"></u--input>
			</view>
			<view class="btns">
				<view class="btn1" @click="login">
					登录
				</view>
				<view class="btn2" @click="showBox=3">
					注册
				</view>
			</view>
		</view>
		<view class="box3" v-else>
			<view class="item">
				<text>账号：</text>
				<u--input placeholder="请输入账号" v-model="register.username" border="surround"></u--input>
			</view>
			<view class="item">
				<text>密码：</text>
				<u--input placeholder="请输入密码" type="password" v-model="register.password" border="surround"></u--input>
			</view>
			<view class="item">
				<text>确认：</text>
				<u--input placeholder="请输入确认" type="password" v-model="register.repassword" border="surround">
				</u--input>
			</view>
			<view class="item">
				<text>昵称：</text>
				<u--input placeholder="请输入昵称" v-model="register.nickname" border="surround"></u--input>
			</view>
			<view class="item">
				<text>电话：</text>
				<u--input placeholder="请输入电话" v-model="register.phone" border="surround"></u--input>
			</view>
			<view class="item">
				<text>头像：</text>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="1"></u-upload>
			</view>
			<view class="btns">
				<view class="btn1" @click="doRegister">
					注册
				</view>
				<view class="btn2" @click="back(2)">
					返回
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from 'js-md5'
	export default {
		data() {
			return {
				username: '',
				password: '',
				showBox: 1,
				user: {
					img: '',
					name: ''
				},
				register: {
					username: '',
					password: '',
					repassword: '',
					nickname: '',
					phone: '',
					photo: ''
				},
				fileList1: [],
			}
		},
		methods: {
			async login() {
				let password = md5(this.password)
				let {
					data,
					token
				} = await uni.$post('login', {
					username: this.username,
					password
				})
				console.log('login', data)
				this.user.img = data.img
				this.user.name = data.nickname

				// 缓存用户信息
				uni.setStorageSync('mine', JSON.stringify(data))
				uni.setStorageSync('token', token)
				this.showBox = 1

				// 判断是否需要跳转回页面
				let navigateType = uni.getStorageSync('navigateType')
				let url = uni.getStorageSync('url')
				if (navigateType) {
					uni.removeStorageSync('navigateType')
					uni.removeStorageSync('url')
					if (navigateType == 'navigateTo') {
						uni.navigateTo({
							url
						})
					} else if (navigateType == 'switchTab') {
						uni.switchTab({
							url
						})
					}
					
				}
			},
			exit() {
				uni.showModal({
					content: '确定退出系统？',
					success: (res) => {
						if (res.confirm) {
							this.user.name = ''
							this.user.img = ''
							uni.clearStorageSync('mine')
							uni.clearStorageSync('token')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					this.register.photo = result
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://localhost:8080/uploadUserImg', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							// mock无法匹配到全路径，测试方便这里直接返回个固定值
							console.log('.....', res)
							// resolve(res.data.data)
							let resp = {
								"errMsg": "uploadFile:ok",
								"statusCode": 200,
								"data": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fe5%2F42%2Ff0%2Fe542f0b7969a01e037138624b082174d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663945874&t=d11d6ebe6a4961663a64e5a506985a59"
							}
							resolve(resp.data)
						}
					});
				})
			},
			async doRegister() {
				if (!this.register.username || !this.register.password || !this.register.nickname) {
					return uni.showToast({
						title: '请输入完整信息'
					})
				}
				if (this.register.password != this.register.repassword) {
					return uni.showToast({
						title: '密码不一致'
					})
				}
				// 对密码加密
				this.register.password = md5(this.register.password)
				let ret = await uni.$post('register', this.register)
				if (ret.statusCode == 200) {
					uni.showToast({
						title: '注册成功'
					})
				}
			},
			back(num) {
				this.showBox = num
				this.register = {
					username: '',
					password: '',
					repassword: '',
					nickname: '',
					phone: '',
					photo: ''
				}
				this.username = ''
				this.password = ''
			}
		},
		computed: {
			currentImg() {
				if (this.user.img) {
					return this.user.img
				}
				return 'https://images.weserv.nl/?url=https://c-ssl.duitang.com/uploads/blog/202107/09/20210709142454_dc8dc.jpeg'
			}
		},
		mounted() {
			let data = uni.getStorageSync('mine')
			if (data) {
				let mine = JSON.parse(data)
				this.user.img = mine.img
				this.user.name = mine.nickname
			}
		}
	}
</script>

<style scoped lang="scss">
	.mine {
		.box1 {
			height: 360rpx;
			background: #2c8283;
			display: flex;
			justify-content: center;
			align-items: center;

			.btn {
				width: 80px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: white;
				border: 1px solid white;
				border-radius: 4px;
			}

			.user {
				display: flex;
				flex-direction: column;
				align-items: center;

				.img {
					box-shadow: 0 0 10px tomato;
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
				}

				.txt {
					margin-top: 6px;
					color: #eee;
				}
			}
		}

		.box2 {
			.item {
				display: flex;
				align-items: center;
				padding: 0 40rpx;
				margin: 10px 0;
			}

			.btns {
				display: flex;
				justify-content: flex-end;
				padding: 0 20px;

				.btn1 {
					border: 1px solid #369;
					padding: 4px 16px;
					border-radius: 4px;
					color: #369;
					margin-right: 10px;
				}

				.btn2 {
					border: 1px solid #339966;
					padding: 4px 16px;
					border-radius: 4px;
					color: #339966;
				}
			}
		}

		.box3 {
			.item {
				display: flex;
				align-items: center;
				padding: 0 40rpx;
				margin: 10px 0;
			}

			.btns {
				display: flex;
				justify-content: flex-end;
				padding: 0 20px;

				.btn1 {
					border: 1px solid #369;
					padding: 4px 16px;
					border-radius: 4px;
					color: #369;
					margin-right: 10px;
				}

				.btn2 {
					border: 1px solid #339966;
					padding: 4px 16px;
					border-radius: 4px;
					color: #339966;
				}
			}
		}
	}
</style>
